<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <script src="https://r3.ihuipao.cn/site/2018/public/Base64.js"></script>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script type="text/javascript" src="https://r3.ihuipao.cn/wuxih5/js/main.js"></script>
  <script src="http://r3.ihuipao.cn/wuxih5/js/html2canvas.js"></script>
  <script src="http://r3.ihuipao.cn/wuxih5/js/canvas2image.js"></script>



  <title>汇跑赛事</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .app{
    max-width: 850px;
    margin: 0 auto;
    
  }
  .app img {
    width: 100%;
    max-width: 100%;
  }


  .recommend{
    text-align: center;
  }


.cc{margin:0 auto; overflow: hidden;  position: relative;}
.aa,.bb{float: left;}
.aa{
  
    width: 60%;
    position: absolute;
    top: 0;
    bottom: 0;
}
.bb{  
    padding-left: 60%; }

    .aa>div{
      display: table;
    height: 100%;
    }

    .aa>div>h4{
      display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
    }
  
  </style>
</head>

<body>


  <!-- <div class="box">
    　　<p>这是生成图片的box，内容不限</p>　
    //跨域图片（oss地址）
    　　<img id="ossImg" src="http://r3.ihuipao.cn/wuxih5/dist/static/static/img/83.png">
  </div>
  <div>
    123
    <div class="card_box"></div>
  </div>

  <div id='canvasImg'></div> -->

  <canvas id="canvas" style="display: none"></canvas>
  <img id="canvasImg" />
  <script>
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');


    function getImageBlob(url, cb) {
      var xhr = new XMLHttpRequest();
      xhr.open('get', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function () {
        if (this.status == 200) {
          imgResponse = this.response;
          //这里面可以直接通过URL的api将其转换，然后赋值给img.src
          //也可以使用下面的preView方法将其转换成base64之后再赋值
          img.src = URL.createObjectURL(this.response);
        }
      };
      xhr.send();
    }
    //这里面将blob转换成base64
    function preView(url) {
      let reader = new FileReader();
      getImageBlob(url, function (blob) {
        reader.readAsDataURL(blob);
      });
      reader.onload = function (e) {
        console.log(e.loaded)
      }
    }
    img.onload = function () {
      canvas.width = img.width;
      canvas.height = img.height + 200;
      ctx.drawImage(img, 0, 0);
      document.getElementById('canvasImg').src = canvas.toDataURL("image/jpeg", 1);
    }
    var imgResponse = '';
    getImageBlob(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536296967533&di=ddaa4a3094c071cc050e760864961bd9&imgtype=0&src=http%3A%2F%2Fwww.360zimeiti.com%2Fuploads%2Fallimg%2F161218%2F1-16121Q23I2637.jpg"
    );

  </script>
  <!-- <script>
    var c_width = $('.box').outerWidth(); //如果box设置了padding，需要获取outerWidth和outerHeight来赋给canvas；
    var c_height = $('.box').outerHeight();

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    //以下代码是获取根据屏幕分辨率，来设置canvas的宽高以获得高清图片
    // 屏幕的设备像素比
    var devicePixelRatio = window.devicePixelRatio || 2;

    // 浏览器在渲染canvas之前存储画布信息的像素比
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;

    // canvas的实际渲染倍率
    var ratio = devicePixelRatio / backingStoreRatio;

    canvas.width = c_width * ratio;
    canvas.height = c_height * ratio;
    canvas.style.width = c_width + "px";
    canvas.style.height = c_height + "px";

    var transTop = $(document).scrollTop() - $('.card_box').offset().top; //获取div垂直方向的位置

    context.scale(ratio, ratio);
    context.translate((c_width - $(window).width()) / 2, transTop) //canvas的位置要保证与div位置相同。

    //高清图设置完成

    //解决跨域，将跨域图片路径转为base64格式

    var img = new Image();
    var canvas2 = document.createElement('canvas');
    var ctx = canvas2.getContext('2d');
    img.setAttribute('crossOrigin', 'anonymous');
    //img.crossOrigin = 'Anonymous';
    //console.log($('#ossImg').attr('src'))
    img.src = 'http://img1.bdstatic.com/static/common/widget/search_box_home/logo/home_white_logo_0ddf152.png'
        img.onload = function () {
          canvas2.height = img.height;
          canvas2.width = img.width;
          ctx.drawImage(img, 0, 0);
          document.getElementById('ossImg').src = canvas.toDataURL("image/jpeg", 1);
          //var dataURL = canvas2.toDataURL('image/png');
          //$('#ossImg').attr('src', dataURL);
          canvas2 = null;

          //重新给img赋值成功后，执行截图方法
          
          getCard()
          

        }

        function getCard() {
          
          html2canvas($(".box"), {
            allowTaint: true,
            useCORS: true,
            canvas: canvas,
            onrendered: function (canvas) {
              dataURL = canvas.toDataURL("image/png");
              var img = new Image();
              img.src = dataURL;
              img.className = 'cardImg';
              img.onload = function () {
                $(".card").append(img);

              }
            },
            width: c_width,
            height: c_height
          })
        }

  </script> -->


</body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="//captcha.luosimao.com/static/dist/api.js"></script>

</html>
